<template>
  <view class="tab-container">
    <my-navbar-top></my-navbar-top>
    <view class="user" v-if="!isLoad">
      <view class="user-header" @click="goToLogin">
        <view class="user-header-left">
          <image :src="userInfo.headimgurl || '/static/images/user/def.png'" mode="widthFix" />
        </view>
        <view class="user-name">
          {{ userInfo.nickname || userInfo.realname || '登录/注册' }}
        </view>
        <!-- 完善信息 -->
        <view class="user-info">
          <image src="/static/images/user/info.png" mode="widthFix" />
          <view>修改个人信息</view>
        </view>
      </view>
      <!--  我的订单 -->
      <view class="user-title">
        <view class="title">我的订单</view>
        <view class="right" @click="goToUrl('/pages/order/index')">
          <view>查看全部订单</view>
          <image src="/static/images/gray-right.png" mode="widthFix" />
        </view>
      </view>
      <view class="order-entry">
        <!-- 1 全部  2 待支付   3待发货   4 待收货  5 已完成   6 已取消 -->
        <view class="order-entry-item" @click="goToUrl('/pages/order/index?type=2')">
          <image src="/static/images/user/o-pay.png" mode="widthFix" />
          <view>待付款</view>
          <view class="badge" v-if="userInfo.order_2_count">
            {{ userInfo.order_2_count }}
          </view>
        </view>
        <view class="order-entry-item" @click="goToUrl('/pages/order/index?type=5')">

          <image src="/static/images/user/o-done.png" mode="widthFix" />
          <view>已完成</view>
          <view class="badge" v-if="userInfo.order_5_count">
            {{ userInfo.order_5_count }}
          </view>
        </view>
        <view class="order-entry-item" @click="goToUrl('/pages/order/index?type=3')">
          <image src="/static/images/user/o-send.png" mode="widthFix" />
          <view>待发货</view>
          <view class="badge" v-if="userInfo.order_3_count">
            {{ userInfo.order_3_count }}
          </view>
        </view>
        <view class="order-entry-item" @click="goToUrl('/pages/order/index?type=4')">
          <image class="shou" src="/static/images/user/o-pendding.png" mode="widthFix" />
          <view>待收货</view>
          <view class="badge" v-if="userInfo.order_4_count">
            {{ userInfo.order_4_count }}
          </view>
        </view>
      </view>
      <!--  我的收藏 -->
      <view class="user-title" @click="goToUrl('/pages/user/collect/index')">
        <view class="title">我的收藏</view>
        <view class="right">
          <image src="/static/images/gray-right.png" mode="widthFix" />
        </view>
      </view>
      <!--  我的地址 -->
      <view class="user-title" @click="goToUrl('/pages/user/address/index')">
        <view class="title">我的地址</view>
        <view class="right">
          <image src="/static/images/gray-right.png" mode="widthFix" />
        </view>
      </view>
      <!--  关于-->
      <view class="user-title" @click="goToUrl('/pages/user/about/index')">
        <view class="title">关于我们</view>
        <view class="right">
          <image src="/static/images/gray-right.png" mode="widthFix" />
        </view>
      </view>
    </view>
	<!-- 悬浮按钮 -->
	<float-icon></float-icon>
    <custom-tab-bar :current="3"></custom-tab-bar>
  </view>
</template>

<script>
import floatIcon from '@/components/floatIcon.vue'
import Login from './login/index.vue'
export default {
  name: 'Index',
  components: {
    Login,
	floatIcon
  },
  data() {
    return {
      isLoad: true, // 是否加载完成
      userInfo: {},
      isLogin: false, // 是否登录
    }
  },
  onShow() {
    let telephone = uni.getStorageSync('userInfo').telephone || ''
    this.isLogin = !!telephone
    console.log(this.isLogin, 'isLogin')
    if (!this.isLogin) {
      this.isLoad = false
      return
    } else {
      this.getUserInfo()
    }
  },
  methods: {
    goToLogin() {
      if (!this.isLogin) {
        uni.navigateTo({
          url: '/pages/user/login/index',
        })
      } else {
        uni.navigateTo({
          url: '/pages/user/register/index',
        })
      }
    },
    goToUrl(url) {
      uni.navigateTo({
        url,
      })
    },
    // 获取用户信息
    getUserInfo() {
      try {
        this.$api.getInfo().then((res) => {
          if (res.code == 0) {
            this.userInfo = res.data
            uni.setStorageSync('userInfo', this.userInfo)
          }
          this.isLoad = false
        })
      } catch (e) {
        console.error('获取用户信息失败', e)
        this.isLoad = false
      }
    },
    handleLoginSuccess() {
      this.isLogin = true
      console.log('登录成功')
    },
  },
}
</script>

<style lang="scss" scoped>
.user {
  position: relative;
  height: 100%;
  overflow: hidden;
  padding-top: 60rpx;
  box-sizing: border-box;

  .user-logout {
    position: absolute;
    bottom: 180rpx;
    left: 0;
    width: 100%;
    height: 100rpx;
    font-size: 24rpx;
    text-align: center;
    color: #545454;
    text-decoration: underline;
  }

  .user-header {
    display: flex;
    box-sizing: border-box;
    position: relative;
    padding-left: 58rpx;
    margin-bottom: 60rpx;

    .user-info {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      right: 0;
      bottom: 0;
      height: 58rpx;
      background-color: #fff;
      border-top-left-radius: 50rpx;
      border-bottom-left-radius: 50rpx;
      padding: 0 32rpx;
      color: #979797;
      font-size: 24rpx;

      image {
        width: 30rpx;
        height: 24rpx;
        margin-right: 12rpx;
      }
    }

    .user-name {
      font-size: 32rpx;
      color: var(--main-color);
      font-weight: bold;
      margin-left: 20rpx;
      padding-top: 32rpx;
    }

    .user-header-left {
      width: 204rpx;
      height: 204rpx;
      border-radius: 50%;
      overflow: hidden;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .user-title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 36rpx;
    box-sizing: border-box;
    margin-bottom: 64rpx;

    .title {
      font-size: 32rpx;
      color: #545454;
    }

    .right {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0;

      view {
        font-size: 24rpx;
        color: #979797;
      }

      image {
        width: 14rpx;
        height: 16rpx;
        margin-left: 12rpx;
      }
    }
  }

  .order-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0rpx 70rpx;
    margin-bottom: 164rpx;
    box-sizing: border-box;

    .order-entry-item {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      position: relative;

      .badge {
        position: absolute;
        top: -10rpx;
        right: -10rpx;
        background-color: var(--main-color);
        border-radius: 50%;
        width: 32rpx;
        height: 32rpx;
        line-height: 32rpx;
        text-align: center;
        font-size: 20rpx;
        color: #fff;
      }

      image {
        width: 38rpx;
        height: 38rpx;
        margin-bottom: 12rpx;
      }

      .shou {
        width: 40rpx;
        height: 40rpx;
      }

      view {
        font-size: 24rpx;
        color: #545454;
      }
    }
  }
}
</style>
